<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        formItemWidth="120px"
        :isScalingBtn="false"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        :showActionCol="false"
        :showSelectCol="false"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :tableHeight="480"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <div slot="content_context">
          <!-- 按钮操作栏 -->
          <BtnRender :render="renderBtnsBar" />
        </div>
      </basic-table>
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import basePage from '@/mixins/commodity/basePage';
import { getBtnsBar } from '@/utils/getBtnsRender';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants/list';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getSearchParamBySearchType } from '@/utils/getUtils';
import { getUnitsListService } from '@/api/commodity/commodityManage/unitsManage'
export default {
  mixins: [basePage],
  components: {
    BasicForm,
    BasicTable,
    BtnRender
  },
  data () {
    return {
      formItemList: FORM_ITEMS,
      formData: {
        skuNo: '',
        productName: ''
      },
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false
      }
    }
  },
  mounted () {
    this.handleQueryForm();
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [
        {
          label: '修改',
          method: this.handleEdit,
          icon: 'el-icon-edit-outline',
          type: 'primary',
          size: 'mini',
          hasAuth: true
        },
        {
          label: '单计量修改',
          method: this.handleSingleUnitEdit,
          icon: 'el-icon-edit-outline',
          type: 'primary',
          size: 'mini',
          hasAuth: true
        }
      ];
      return getBtnsBar(h, btnsBar, this.showBtn, 'start');
    },
    // 修改
    handleEdit () {
      this.$router.push({ name: 'unitsManageEdit' });
    },
    // 单计量修改
    handleSingleUnitEdit () {
      this.$router.push({ name: 'unitsManageSingleEdit' });
    },
    // 获取表单查询入参
    getSearchFormParams () {
      setAuthBtnId();
      const searchParam = getSearchParamBySearchType(FORM_ITEMS, this.formData);
      const { nowPage, pageShow } = this.pagination;
      return {
        nowPage,
        pageShow,
        searchParam: JSON.stringify(searchParam)
      }
    },
    // 获取表格数据
    async getTableData () {
      const data = this.getSearchFormParams();
      const retData = await getUnitsListService(
        data,
        state => { this.tableInfo.loading = state; }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.pagination.totalNum = retData.totalNum;
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
